<script lang="ts" setup>
  import { reactive} from 'vue'
  import { BasicTable } from '/@/components/Table';
  import { getUserTokenList} from '/@/api/tokenManage'
  import { 
    Form as AForm, 
    FormItem as AFormItem, 
    Pagination as APagination,
    } from 'ant-design-vue';

  const state = reactive({
    loading: false,
  });

  //pg
  const pg = reactive({
    page: 1,
    size: 10,
    total: 0,
  })
  const pageChangeHandler = (p: number) => {
    pg.page = p;
    onSearch();
  };
  const sizeChangeHandler = (_p: number, s: number) => {
    pg.size = s;
    pg.page = 1;
    onSearch();
  };
  
  // search bar operations
  const searchForm = reactive({
        userName: '',
  });
  const { resetFields } = AForm.useForm(searchForm, reactive({}));
  function resetFieldsAction() {
    resetFields();
    onSearch();
  }

  const onSearch = async () => {
    let p  = {
      startIndex: pg.page,
      pageSize: pg.size,
      username: searchForm.userName
    };
    state.loading = true;
    const { respCode, data} = await getUserTokenList(p);
    state.loading = false;
    if(respCode == 200) {
      tableData.data = data.list;
      pg.total = data.total;
    }
  }


  const tableData = reactive({
    data: [],
    columns: [
      { title: '用户名', dataIndex: 'username', width: 150 },
      { title: '令牌', dataIndex: 'token', width: 420 },
      { title: 'ip', dataIndex: 'ipAddress', width: 220 },
      { title: '登录时间(s)', dataIndex: 'loginDate', width: 220 },
      { title: '失效时间(s)', dataIndex: 'expireDate', width: 220 },
    ],
    selected: [] as any,
    selectedRowKeys: [] as any,
    editData: null as any,
  });
  
  onSearch();
</script>

<template>
  <div id="token-manage-sys" class="p-4">
    <div class="searchBox">
      <a-form :model="searchForm" ref="searchFormRef" layout='inline'>
        <a-form-item
          name="userName"
          label="用户名"
          :label-col="{  style: { width: '90px' } }"
          :wrapper-col="{  style: { width: '150px' } }">
          <a-input v-model:value="searchForm.userName" placeholder="请输入用户名" allowClear />
        </a-form-item>
        <a-form-item>
          <a-button style="margin-right: 10px" :loading="state.loading" type="primary" @click="onSearch">查询</a-button>
          <a-button @click="resetFieldsAction">重置</a-button>
        </a-form-item>
      </a-form>
    </div>
    <div class="middle-content">
      <div class="userTable">
        <BasicTable
          :columns="tableData.columns"
          :data-source="tableData.data"
          bordered
          :canResize="false"
          :loading="state.loading"
          :pagination="false">
        </BasicTable>
        <a-pagination 
        class="cus-pg"
        show-size-changer
        :total="pg.total"
        :current="pg.page"
        :pageSize="pg.size"
        :show-total="(total) => `共${total}条`"
        @change="pageChangeHandler"
        @showSizeChange='sizeChangeHandler'/>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>

  html[data-theme='light'] {
    .searchBox {
      background-color: #fff;
    }
    .middle-content {
      background-color: #fff;
    }
  }

  html[data-theme='dark'] {
    .searchBox {
      background-color: #000;
    }
    .middle-content {
      background-color: #000;
    }
  }

  #token-manage-sys {
    .searchBox {
      margin-bottom: 20px;
      padding: 10px 10px 0;
    }

    .middle-content {
      padding: 15px;
      display: flex;
      .group-tree {
        height: 100%;
        overflow: hidden auto;
        flex: 0 0 200px;
        margin-right: 20px;
        .inTree {
          display: flex;
          justify-content: space-between;
        }
      }
      .userTable {
        height: calc(100vh - 2rem - 182px); // 搜索框展开一行的高度
        overflow: auto;
        overflow-x: hidden;
      }

    }

    :deep(.ant-table-thead > tr > th){
      font-weight: bold;
    }
    :deep(.ant-table-selection-column){
      padding: 0;
      width: 20px !important;
    }

    :deep(.ant-card-body){
      padding: 10px 15px;
    }

    :deep(.ant-table-tbody > tr > td){
      padding: 15px;
    }
    //调整head行属性
    :deep(.ant-table-thead > tr > th){
      padding: 15px;
    }

    :deep(.ant-form-item){
      margin-bottom: 10px !important;
    }

    .ant-modal-close-x {
      width: 55px;
      line-height: 45px;
      height: 45px;
    }
  }
</style>